<template>
  <div>
    <el-form ref="form" label-width="120px">
      <el-form-item label="كىنو ئىسمى：">
        <el-row>
          <el-col :span="6">
            <el-input size="medium" placeholder="ئىزدىمەكچى بولغان كىنو ئىسمىنى كىرگۈزۈڭ" v-model="searchQuery"></el-input>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-button type="primary" icon="el-icon-search" size="medium" @click="searchVideo">ئىزدەش</el-button>
            <el-button type="info" size="medium" @click="reset">قايتىلاش</el-button>
          </el-col>
          <el-col :span="11" style="text-align:right;padding-right:12px">
            <el-button type="success" @click="openAddDialog">يېڭى كىنو قېتىش</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-table :data="info.list" border stripe v-loading="loading" :default-sort="{ prop: 'id', order: 'descending' }" @sort-change="sortChange">
      <el-table-column width="80px" align="center" prop="id" label="ID" sortable="custom"></el-table-column>
      <el-table-column width="140px" align="center" prop="vid" label="VID"></el-table-column>
      <el-table-column align="center" prop="title" label="كىنو ئىسمى"></el-table-column>
      <el-table-column align="center" prop="coverImg" label="رەسىم">
        <template slot-scope="{row}">
          <el-image style="border-radius:8px" :preview-src-list="[row.coverImg]" :lazy="true" :alt="row.title" :src="row.coverImg"></el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="status" label="ھالەت">
        <template slot-scope="{row}">
          {{['نورمال','','ۋاقتىنچە ئۆچۈرۈلدى'][row.status-1]}}
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="type" label="تىپى">
        <template slot-scope="{row}">
          {{row.type==1?' كىنو فىلىم':'كۆپ قىسىملىق'}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="كىنو تۈرى">
        <template slot-scope="{row}">
          <span style="color:#f40" v-if="!row.sort">تۈرگە ئايرىلمىغان</span>
          <span v-else style="color:#111;font-size:16px">{{row.sort.map(item=>sortMap[item]).join(',')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="nation" label="تەۋە دۆلەت">
        <template slot-scope="{row}">
          <span style="color:#f40" v-if="!row.nation">تۈرگە ئايرىلمىغان</span>
          <span v-else style="color:#111;font-size:16px">{{nationMap[row.nation]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="lang" label="كىنو تىلى">
        <template slot-scope="{row}">
          <span style="color:#f40" v-if="!row.lang">تۈرگە ئايرىلمىغان</span>
          <span v-else style="color:#111;font-size:16px">{{langMap[row.lang]}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="origin_url" label="كىنو ئادىرىسى">
        <template slot-scope="{row}">
          <a target="_blank" :href="row.vid" style="color:#1188ff">{{row.vid}}</a>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="total_qisim" label="جەمئىي قىسىم" sortable></el-table-column>
      <el-table-column align="center" prop="views" label="كۆرۈلۈشى" sortable></el-table-column>
      <el-table-column align="center" prop="create_time" label="ۋاقتى" sortable>
        <template slot-scope="{row}">
          {{$dayjs(row.create_time).format('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" prop="option" label="مەشغۇلات">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button size="small" type="primary" @click="viewInfo(row)">كۆرۈش</el-button>
            <el-button size="small" type="danger" @click="deleteVideo(row)">يۇيۇش</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-row align="center" style="text-align:center;margin-top:20px">
      <el-pagination @current-change="handleCurrentChange" @size-change="sizeChange" background layout="total, sizes, prev, pager, next, jumper" :total="info.total" :page-size="pageSize"
        :current-page="pageNum" :page-sizes="[10, 20, 50, 100]">
      </el-pagination>
    </el-row>
    <EditDialog ref="infoDialog" @getList="getList" :info="currentVideoInfo" :sortList="sortList" />
    <AddDialog ref="addDialog" @getList="getList" :sortList="sortList" />
  </div>
</template>

<script>

import { getList, deleteVideo, videoDetail, searchVideo, getVideoSort } from "@/api/kino";
import EditDialog from './EditDialog.vue';
import AddDialog from './AddDialog.vue';
import { LANG_MAP, NATION_MAP } from '@/utils/enums'
export default {
  name: 'KinoList',
  components: { EditDialog, AddDialog },
  data() {
    return {
      info: { list: [] },
      pageSize: 10,
      pageNum: 1,
      sortOptions: {
        orders: [['id', 'desc']]
      },
      loading: false,
      currentVideoInfo: {},
      searchQuery: '',//
      sortMap: {},
      sortList: [],
      nationMap: NATION_MAP,
      langMap: LANG_MAP
    };
  },
  created() {
    getVideoSort({ user: this.$store.state.user.name }).then(res => {
      let setting_content = JSON.parse(res.setting_content) || []
      this.sortList = setting_content
      this.sortMap = setting_content.reduce((result, current) => { result[current.value] = current.label; return result }, {})
    }).catch(_ => { })
    this.getList()
  },
  mounted() {
  },
  methods: {

    getList() {
      this.loading = true;
      getList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: 1,
        ...this.sortOptions
      }).then(res => {
        res.list.forEach(item => {
          item.sort = item.sort ? JSON.parse(item.sort) : null
        });
        this.info = res;
        this.loading = false;
        console.log(res);
      }).catch(err => {
        this.loading = false;
      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getList();
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageNum = 1;
      this.$nextTick(() => {
        this.getList();
      })
    },
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
      this.$set(this.sortOptions, 'orders', [[prop, order == 'descending' ? 'desc' : 'asc']]);
      this.getList();
    },
    deleteVideo(row) {
      this.$confirm('يۇيۇشنى جەزملەشتۈرەمسىز؟', {
        cancelButtonText: 'ياق',
        confirmButtonText: 'ھەئە'
      }).then(_ => {
        this.$loading();
        deleteVideo({ vid: row.vid }).then(res => {
          this.$message.success('يۇيۇلدى');
          this.$loading().close()
        }).catch(err => {
          this.$message.error(err)
          this.$loading().close()
        })
      }).catch(_ => { })
    },
    viewInfo(row) {
      this.$loading();
      videoDetail({ vid: row.vid }).then(res => {
        this.$loading().close()
        res = res || []
        res.sort((a, b) => a.qisim - b.qisim)
        this.currentVideoInfo = {
          ...row,
          list: res
        };
        this.$refs.infoDialog.dialogVisible = true;
      }).catch(err => {
        this.$loading().close()
      })
    },
    searchVideo() {
      if (!this.searchQuery || this.searchQuery.length < 4) {
        this.$message.warning('كىنو ئىسمىنى كىرگۈزۈڭ')
      } else {
        searchVideo({ query: this.searchQuery }).then(res => {
          this.info = {
            total: res.length,
            list: res
          }
        })
      }
    },
    reset() {
      this.searchQuery = ''
      this.pageNum = 1;
      this.getList()
    },
    openAddDialog() {
      this.$refs.addDialog.dialogVisible = true;
    }
  },
};
</script>

<style scoped lang="scss">
</style>
<style lang="scss">
.el-image {
  img {
    width: 80px;
    &.el-image-viewer__img {
      width: 400px;
    }
  }
}
</style>
